import React,{Component} from 'react'
import './shop.css'
const Shop1=(props)=>{
  var zs=0;
  function ss(a){
    a.forEach(i => {
      zs+=i.count
  
    });
    return zs
  }

  var zj=0;
  function bb(b){
    b.forEach(i=>{
      zj+=i.count*i.price
    })
    return zj
  }
  return(
    <div>
      <h2>商品列表</h2>
      <table className="t">
        <tbody>
        <tr>
          <th className="table">序号</th>
          <th className="table">名称</th>
     
          <th className="table">价钱</th>
          <th className="table">数量</th>
          <th className="table">操作</th>
        </tr>
        {
          props.arr.map((item,i)=>{
            if(item.count>0){
              return <tr key={i}>
                <td className="table">{item.id}</td>
                <td className="table">{item.name}</td>
                <td className="table">{item.price}</td>
         
                <td className="table">
                  <button onClick={()=>props.add(i)}  className="jia">+</button>
                  {item.count}
                  <button onClick={()=>props.jian(i)}  className="jia">-</button>
                </td>
                <td className="table">
                  <button onClick={()=>props.shan(i)}  className="jia">x</button>
                </td>
              </tr>
              }
          })
        }
        </tbody>
      </table>
      <li> 
        <button onClick={props.del} className="button">全部删除</button>
        <p>总价：{bb(props.arr)}元</p>
        <p>总数量：{ss(props.arr)}个</p>
      </li>
    </div>
  )
}
export default Shop1